<script lang='ts' setup>
import { reactive, ref } from 'vue'
import { Upload, Delete } from '@element-plus/icons-vue'
import GoodsImg from '/@/assets/ccflowRightNextAdmin.png'

const uploadNode = ref<HTMLElement>()
const state = reactive({
    currentImg: -1,
    imageList: [
        { id: 222, name: '阿加', src: GoodsImg },
        { id: 42, name: '阿加', src: GoodsImg },
        { id: 522, name: '阿加', src: GoodsImg },
        { id: 2642, name: '阿加', src: GoodsImg },
        { id: 322, name: '阿加', src: GoodsImg },
    ]
})

const props = withDefaults(defineProps<{ 
    modelValue: boolean, 
}>(), {
    modelValue: false
})

const emit = defineEmits(['update:modelValue'])

const closeDialog = () => {
    emit('update:modelValue', false)
}

const uploadImg = () => {
    uploadNode!.value!.click()
}

const selectImg = (index: number) => state.currentImg = index;

const pageNation = reactive({
    pageNum: 1,
    pageSize: 20,
    total: 0
})

/**
 * 分页函数
 */
const handleSizeChange = () => {}
const handleCurrentChange = () => {}

</script>

<template>
    <main>
        <el-dialog v-model="props.modelValue" title="选择图片" center @close="closeDialog" style="width: 1000px;">
            <section>
                <el-row justify="end">
                    <el-button type="primary"  >使用选中图片</el-button>
                    <el-button :icon="Upload"  @click="uploadImg" />
                    <el-button :icon="Delete"  />
                    <input type="file" ref="uploadNode" style="width: 0px;height: 0px; opacity: 0;" />
                </el-row>

                <section class="goods-img-list">
                    <section class="goods-img-item" v-for="(i, index) of state.imageList" :key="i.id" @click="selectImg(index)">
                        <img :src="i.src" :class="['goods-img', index === state.currentImg ? 'active-img' : '']" style="" alt="">
                        <p class="goods-img-name">{{ i.name }}</p>
                    </section>
                </section>
            </section>

            <section class="mt15">
				<el-row justify="end">
					<el-col :span="24" class="flex-end-center">
						<el-pagination
						v-model:current-page="pageNation.pageNum"
						v-model:page-size="pageNation.pageSize"
						:page-sizes="[10, 20, 30]"
						:background="true"
						layout="total, sizes, prev, pager, next, jumper"
						:total="pageNation.total"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						/>
					</el-col>
				</el-row> 
			</section>

        </el-dialog>
    </main>
</template>

<style lang='scss' scoped>
.goods-img-list{
    display: flex;
    flex-wrap: wrap;
    .goods-img-item{
        text-align: center;
        margin-right: 20px;
        margin-bottom: 20px;
        border: 1px solid #fff;
        .goods-img-name{
            font-size: 13px;
            margin-top: 4px;
        }
       
    }
    .goods-img{
        width: 90px;
        height: 90px; 
        object-fit: cover; 
        border-radius: 6px;
        border: 2px solid #ffffff;
        cursor: pointer;
        &:hover {
            border: 2px solid #e75c5c;
        }
    }
    .active-img {
        border: 2px solid #e75c5c;
    }
}
</style>